<template>
  <div>
     <el-dialog title="修改密码"  center :visible="true" width="30%"  :close-on-click-modal=false>
			<el-form :model="passwordDto" label-width="80px" :rules="rules" ref="passwordDto">
				<el-form-item label="旧密码" prop="oldPwd">
					<el-input type="password" v-model="passwordDto.oldPwd"  :maxLength="20"  placeholder="请输入旧密码"></el-input>
				</el-form-item>
				<el-form-item label="新密码"  prop="newPwd">
					<el-input type="password" v-model="passwordDto.newPwd"  :maxLength="20" placeholder="请输入新密码"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="repeatPwd">
					<el-input type="password" v-model="passwordDto.repeatPwd"  :maxLength="20" placeholder="请再次输入新密码"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" >
				<el-button @click="cancleChangePw">取 消</el-button>
				<el-button type="primary" @click="validationField">确 定</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import UserService from '../../service/system-config/user';
import { PasswordDto } from '../../api/Interface';
// import { SysMenuTree } from '../../api/Interface';


@Component({
  components: {}
})
export default class Menu extends Vue {
  // 初始化数据
  public passwordDto: PasswordDto = {} as PasswordDto; // 参数
  public dialogChangePw: boolean = false;
  public rules: object = {
      oldPwd: [
          { required: true,  message: '请输入旧密码', trigger: 'blur' },
          // { max: 20,  message: '20 个字符以内', trigger: 'blur' }
      ],
      newPwd: [
          { required: true, validator: this.validatePass, trigger: 'blur' },
          // { max: 20,  message: '20 个字符以内', trigger: 'blur' }
      ],
      repeatPwd: [
          {required: true, validator: this.validatePass2, trigger: 'blur' },
      ],
  };
  public $refs: {
    passwordDto: HTMLFormElement,
  };
  @Prop({default: false})
  public showDialogChangePw: boolean;
  @Prop({})
  public isShowPwdDialog: () => void;

    // 验证密码
  public validatePass(rule: object, value: string, callback: (obj ?: object) => void) {
    if (!value || value === '') {
      callback(new Error('请输入新密码'));
    } else {
      if (this.passwordDto.repeatPwd !== '') {
        this.$refs.passwordDto.validateField('repeatPwd');
      }
      callback();
    }
  }
  // 验证确认密码
  public validatePass2(rule: object, value: string, callback: (obj ?: object) => void) {
    if (!value || value === '') {
      callback(new Error('请再次输入密码'));
    } else if (value !== this.passwordDto.newPwd) {
      callback(new Error('两次输入密码不一致!'));
    } else {
      callback();
    }
  }
//   public mounted() {}
   //验证字段
  public validationField() {
      this.$refs.passwordDto.validate((valid) => {
          if (valid) {
            this.confirmChangePw();
          } else {
            return;
          }
      });
  }
  // 改密码
  public async confirmChangePw() {
     const res = await UserService.changePwd(this.passwordDto);
     if (res.resCode === '0') {
        this.$message({
            message: '密码修改成功！',
            type: 'success',
            center: true
        });
        this.isShowPwdDialog();
     }
  }
  // 取消
  public  cancleChangePw() {
     this.isShowPwdDialog();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>

</style>
